<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${path}/css/jquery-ui.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${path}/css/bootstrap.min.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${path}/css/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${path}/css/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${path}/css/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${path}/css/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${path}/css/fw.css" media="screen">
</head>
<body class="bg-m">



<div class="preloader">
    <i class="fa fa-spinner"></i>
</div>
<!--引入导航begin-->
<%@ include file="common/header.jsp"%>
<!--引入导航end-->

<section class="m-t-0">
    <div class="container">
        <div class="row slider slider-1">
            <div class="owl" data-items="4" data-itemsDesktop="3" data-itemsDesktopSmall="2" data-itemsTablet="2" data-itemsMobile="1" data-transitionstyle="fade" data-singleItem="true" data-autoplay="true" data-pag="false" data-buttons="false">
                <div class="col-sm-8 col-md-9 pull-right">
                    <div class="slider-item">
                        <img src="${path}/images/bg-13.png" alt="image">
                        <div class="slider-caption">
                            <h3 class="heading-size-3">100% 纯天然</h3>
                            <h2 class="heading-size-1">有机食品</h2>
                                <h4 class="heading-size-5">Best product organic shop</h4>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8 col-md-9 pull-right">
                    <div class="slider-item">
                        <img src="${path}/images/bg-12.png" alt="image">
                        <div class="slider-caption">
                            <h3 class="heading-size-3">我们提供最优质的</h3>
                            <h2 class="heading-size-1">新鲜蔬菜</h2>
                                <h4 class="heading-size-5">Farm fresh vegetables & fruits</h4>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8 col-md-9 pull-right">
                    <div class="slider-item">
                        <img src="${path}/images/bg-21.png" alt="image">
                        <div class="slider-caption">
                            <h3 class="heading-size-3">纯粹的</h3>
                            <h1 class="heading-size-1">水果</h1>
                            <h4 class="heading-size-5">Little things make a big difference</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Product tabs -->
<div>
    <div class="container text-center m-t-30">
        <div class="ht-tabs ht-tabs-product text-center">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs m-b-20" role="tablist">
                <li role="presentation" class="active">
                    <a href="#tab-description" aria-controls="tab-description" role="tab" data-toggle="tab"><p><img src="${path}/images/25.jpg" alt="image"></p>全部</a>
                </li>
                <li role="presentation">
                    <a href="#tab-review1" aria-controls="tab-review" role="tab" data-toggle="tab"><p><img src="${path}/images/17.jpg" alt="image"></p>推荐产品</a>
                </li>
                <li role="presentation">
                    <a href="#tab-review2" aria-controls="tab-review" role="tab" data-toggle="tab"><p><img src="${path}/images/6.jpg" alt="image"></p>新品上市</a>
                </li>
                <li role="presentation">
                    <a href="#tab-review3" aria-controls="tab-review" role="tab" data-toggle="tab"><p><img src="${path}/images/9.jpg" alt="image"></p>热卖产品</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="tab-description">
                    <div class="row">
                        <div style="text-align: right"><a href="javascript:more(-1)">更多...</a></div>
                        <c:forEach items="${page.list}" var="product">
                            <div class="col-sm-6 col-md-4 col-lg-3">
                                <!-- Product item -->
                                <div class="product-item">
                                    <a href="${path}/product/details?id=${product.pid}">
                                        <img src="${path}/images/product/${product.imgUrl}" alt="image">
                                    </a>
                                    <div class="product-caption">
                                        <h4 class="product-name">
                                            <a href="#">${product.pName}</a>
                                        </h4>
                                        <div class="product-price-group">
                                            <span class="product-price">￥${product.price}</span>
                                            <span>${product.standard}</span>
                                        </div>
                                        <div class="ht-btn-group">
                                            <a href="${path}/cart/addtocart?pid=${product.pid}" class="compare_btn">添加到购物车</a>
                                        </div>
                                        <h4></h4>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="tab-review1">
                    <div class="row">
                        <div style="text-align: right"><a href="javascript:more('推荐产品')">更多...</a></div>
                        <c:forEach items="${page1.list}" var="product">
                            <div class="col-sm-6 col-md-4 col-lg-3">
                                <!-- Product item -->
                                <div class="product-item">
                                    <a href="${path}/product/details?id=${product.pid}">
                                        <img src="${path}/images/product/${product.imgUrl}" alt="image">
                                    </a>
                                    <div class="product-caption">
                                        <h4 class="product-name">
                                            <a href="#">${product.pName}</a>
                                        </h4>
                                        <div class="product-price-group">
                                            <span class="product-price">￥${product.price}</span>
                                            <span>${product.standard}</span>
                                        </div>
                                        <div class="ht-btn-group">
                                            <a href="${path}/cart/addtocart?pid=${product.pid}" class="compare_btn">添加到购物车</a>
                                        </div>
                                        <h4></h4>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane" id="tab-review2">
                    <div class="row">
                        <div style="text-align: right"><a href="javascript:more('新品上市')">更多...</a></div>
                        <c:forEach items="${page2.list}" var="product">
                            <div class="col-sm-6 col-md-4 col-lg-3">
                                <!-- Product item -->
                                <div class="product-item">
                                    <a href="${path}/product/details?id=${product.pid}">
                                        <img src="${path}/images/product/${product.imgUrl}" alt="image">
                                    </a>
                                    <div class="product-caption">
                                        <h4 class="product-name">
                                            <a href="#">${product.pName}</a>
                                        </h4>
                                        <div class="product-price-group">
                                            <span class="product-price">￥${product.price}</span>
                                            <span>${product.standard}</span>
                                        </div>
                                        <div class="ht-btn-group">
                                            <a href="${path}/cart/addtocart?pid=${product.pid}" class="compare_btn">添加到购物车</a>
                                        </div>
                                        <h4></h4>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>


                <div role="tabpanel" class="tab-pane" id="tab-review3">
                    <div class="row">
                        <div style="text-align: right"><a href="javascript:more('热卖产品')">更多...</a></div>
                        <c:forEach items="${page3.list}" var="product">
                            <div class="col-sm-6 col-md-4 col-lg-3">
                                <!-- Product item -->
                                <div class="product-item">
                                    <a href="${path}/product/details?id=${product.pid}">
                                        <img src="${path}/images/product/${product.imgUrl}" alt="image">
                                    </a>
                                    <div class="product-caption">
                                        <h4 class="product-name">
                                            <a href="#">${product.pName}</a>
                                        </h4>
                                        <div class="product-price-group">
                                            <span class="product-price">￥${product.price}</span>
                                            <span>${product.standard}</span>
                                        </div>
                                        <div class="ht-btn-group">
                                            <a href="${path}/cart/addtocart?pid=${product.pid}" class="compare_btn">添加到购物车</a>
                                        </div>
                                        <h4></h4>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@ include file="common/recent.jsp"%>
<!--引入footer Begin-->
<%@ include file="common/footer.jsp"%>
<!--引入footer  End-->

<!-- jQuery -->
<script src="${path}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="${path}/js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${path}/js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="${path}/js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${path}/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${path}/js/script.js"></script>

<script src="${path}/js/product.js"></script>

</body>
</html>